<template>
	<view class="index">
		<view class="index-one">
			<uni-data-select v-model="value" :localdata="com.range" @change="change"></uni-data-select>
		</view>
		<view class="index-two">
			<uni-data-select v-model="value1" :localdata="com.rane" @change="change1"></uni-data-select>
		</view>

	</view>
	<view class="center" v-for="(v,i) in cardCom.lsit" key="v.id">
		<view class="center-next">
			<view class="center-next-one">
				{{v.name}}
			</view>
			<view>
				可用门店：{{v.area.remark}}
			</view>
			<view>
				可用范围：{{v.area.name}}
			</view>
			<view>
				有效期限：{{v.createTime}}~{{v.expireTime}}
			</view>
			<view>
				该卡卷可在：{{v.usable}}
			</view>
			<view>
				每天仅只能使用一张{{v.userxiao}}
			</view>
		</view>
		<view class="center-footer">
			<text>会员价￥{{v.price}}</text> |
			<text>非会员：{{v.price}}元</text>
		</view>
		<view class="buyCard" @click="buyCard(v.id)">
			购买
		</view>
	</view>
</template>

<script setup lang="ts">
	import http from '../../utils/http.js'
	import {
		ref,
		reactive,
		onMounted,

	} from 'vue'
	import store from '@/store/index.js'
	import {
		useRouter
	} from 'vue-router'
	const route = useRouter();
	let value = ref < Number > (0);
	let value1 = ref < Number > (0);
	let com = reactive({
		range: [{
				value: 0,
				text: "全部门店"
			},
			{
				value: 1,
				text: "高新区"
			}
		],
		rane: [{
				value: 0,
				text: "全部类型"
			},
			{
				value: 1,
				text: "一小时卡"
			},
			{
				value: 2,
				text: "两小时卡"
			},
		],

	})
	let cardCom = reactive({

		lsit: [{
			area: {
				id: null,
				name: "单人名区",
				remark: null,
				price: 0
			},
			createTime: "2022-11-12",
			expireTime: "2022-12-03",
			id: 2,
			name: "三小时卡",
			price: 29,
			state: null,
			usable: "周一/周二/周三/周四/周五",
		}]
	})
	let toNewPage = []
	let buyCard = (ev) => {

		for (let i = 0; i < cardCom.lsit.length; i++) {
			if (cardCom.lsit[i].id == ev) {
				toNewPage = cardCom.lsit[i]
			}
		}
		store.state.mysl = toNewPage;
		uni.navigateTo({
			url: '/pages/BuyCardTwo/BuyCardTwo'
		});
	};
	let kn = onMounted(() => {
		http({
			url: '/couponStore/list',
			method: 'get',
		}).then((res) => {


			res.data.coupon.forEach((ev) => {
				ev.area.remark = '高新区店'
			})
			cardCom.lsit = res.data.coupon
		});

	})
</script>

<style lang="less" scoped>
	.index {

		background-color: antiquewhite;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		padding-top: 0;
		padding-bottom: 0;
		align-items: center;
		position: relative;
	}

	.center .center-next .center-next-one {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: rgb(198, 150, 79);
	}

	.center-next>view {
		height: 40rpx;
		line-height: 40rpx;

	}

	.center {
		margin-left: 40rpx;
		margin-right: 40rpx;
		position: relative;
		font-size: 26rpx;
		border: 1px solid #747474;
		border-radius: 6px;
		margin-top: 40rpx;
		box-shadow: 5px 5px #eee;
	}

	.center>view {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.center .center-footer {
		border-top: 1px solid white;
		background-color: #eee;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0;

	}

	.center-footer>text:nth-child(1) {
		color: rgb(198, 150, 79);
		font-size: 34rpx;
		margin-left: 20rpx;
	}

	.buyCard {
		position: absolute;
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		top: 90rpx;
		right: 40rpx;
		background-color: rgb(198, 150, 79);
		color: white;
		border-radius: 40rpx;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>
